<template>
  <div class="online-container app-container">
    <el-row class="main">
      <el-col :span="18" class="chart-info">
        <ScanSection>
          <div class="charts">
            <AnalyseCharts :data-list="dataList" />
          </div>
          <div class="tabs">
            <BottomSignalTabs :signal-list="signalList" />
          </div>
        </ScanSection>
      </el-col>
      <el-col :span="6" class="chart-form">
        <ScanSection class="charts">
          <div class="form">
            <RightSettings @start="linkScan" @stop="closeScan" />
          </div>
        </ScanSection>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="SpectrumScan">
  import ScanSection from '@/components/SpectrumSignal/ScanSection.vue'
  import AnalyseCharts from '@/views/analyseCharts'
  import RightSettings from './rightSettings'
  import BottomSignalTabs from './bottomSignalTabs'
  import useScanHook from '@/common/hooks/scanData'
  import useScanStore from '@/store/modules/scanMonitor'
  import { linkWs } from '@/api/upperComputer/scan'

  let ws = null
  const { scanData, dataList, signalList } = useScanHook()
  const { spectrum } = useScanStore()
  const scanStore = useScanStore()
  const linkScan = async form => {
    if (ws) {
      ws.close()
    }
    ws = await linkWs({
      paramGet: '0123456789:7545673412',
      host: '192.168.20.41',
      port: 44444,
      taskFunCode: 16,
      sendTime: 1000,
      commandType: 1,
      thresholdType: 1,
      threshold: 500,
      terminationDirection: 90,
      azimuthStep: 10,
      polarization: form.polarType,
      startFrequency: spectrum.startFre,
      endFrequency: spectrum.endFre,
      frequencyStep: spectrum.stepLength
    })
    ws.onmessage = event => {
      try {
        const { data } = JSON.parse(event.data)
        scanData.value = data
      } catch (err) {
        console.log(err)
      }
    }
  }
  const closeScan = () => {
    ws.close()
    ws = null
    scanStore.dataStatus = 1
  }
</script>

<style scoped lang="scss">
  @import '@/assets/styles/mixin.scss';

  .online-container {
    @include boxBg('@/assets/images/specscanbg.png');
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 1rem;
    overflow-y: auto;

    .main {
      height: 100%;
    }
  }

  .chart-form {
    padding-left: 10px;
  }
</style>
